<template>
    <div >
        <div class="title clearfix">
            <div style="float: left">
                <span>每月9号修改最新数据（休息日顺延），数据有问题，请联系各地区行政人员。</span>
            </div>
            <div style="float: right">
                <el-form ref="form" label-width="100px">
                    <el-form-item>
                        <el-button id="isAgree" type="primary" size="mini" @click="getPersonMonthlyAttendanceData">导出excel</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <el-table
                :data="tableData"
                style="width: 85%; ">
            <el-table-column prop="jobNumId" label="员工编号" width="80" align="center" fixed></el-table-column>
            <el-table-column prop="name" label="姓名" width="70" align="center" fixed></el-table-column>
            <el-table-column prop="workPlace" label="上班地点" width="80" align="center" fixed></el-table-column>
            <el-table-column prop="dept" label="部门" width="80" align="center" fixed></el-table-column>
            <el-table-column prop="position" label="职位" width="130" align="center" fixed></el-table-column>
            <el-table-column :label="title_label" align="center">
                <el-table-column prop="standardAttendance" label="标准出勤" width="55" align="center"> </el-table-column>
                <el-table-column label="实际出勤" align="center">
                    <el-table-column prop="probationAttendance" label="试用期" width="65" align="center"> </el-table-column>
                    <el-table-column prop="regularAttendance" label="转正期" width="65" align="center"> </el-table-column>
                </el-table-column>
                <el-table-column label="请假时间"  align="center" style="border-color: #c1c1c1">
                    <el-table-column prop="personalLeave" label="事假" width="50" align="center"> </el-table-column>
                    <el-table-column prop="sickLeave" label="病假" width="50" align="center"> </el-table-column>
                    <el-table-column prop="transferVacation" label="调休" width="50" align="center"> </el-table-column>
                    <el-table-column prop="annualLeave" label="年假" width="50" align="center"> </el-table-column>
                    <el-table-column prop="otherLeave" label="其他" width="50" align="center"> </el-table-column>
                </el-table-column>
                <el-table-column label="加班时间（H）"  align="center">
                    <el-table-column prop="usually" label="平时" width="50" align="center"> </el-table-column>
                    <el-table-column prop="weekend" label="周末" width="50" align="center"> </el-table-column>
                    <el-table-column prop="holidays" label="节假日" width="65" align="center"> </el-table-column>
                </el-table-column>
            </el-table-column>
            <el-table-column prop="entryDate" label="入职日期" width="93" align="center"></el-table-column>
            <el-table-column prop="correctionDate" label="转正日期" width="93" align="center"></el-table-column>
            <el-table-column prop="remark" label="备注" width="60" align="center"></el-table-column>
            <el-table-column label="应发工资"  align="center">
                <el-table-column prop="latenessNumber" label="迟到次数(10元/次)" width="80" align="center"> </el-table-column>
                <el-table-column prop="missingCardsNumber" label="缺卡次数(20元/次)" width="80" align="center"> </el-table-column>
                <el-table-column prop="expressDeduction" label="快递扣款" width="50" align="center"> </el-table-column>
                <el-table-column prop="otherDeduction" label="其他扣款" width="50" align="center"> </el-table-column>
                <el-table-column prop="eightMealSupplement" label="8点餐补" width="50" align="center"> </el-table-column>
                <el-table-column prop="tenMealSupplement" label="10点餐补" width="55" align="center"> </el-table-column>
                <el-table-column prop="travelAllowance" label="出差补贴" width="50" align="center"> </el-table-column>
                <el-table-column prop="otherAllowance" label="其他补贴(内推等)" width="80" align="center"> </el-table-column>
            </el-table-column>
        </el-table>
        <van-pagination @change="getPersonMonthlyAttendanceList()" v-model="currentPage" :total-items="totalNum" :items-per-page="10" force-ellipses>
            <template #prev-text>
                <van-icon name="arrow-left" />
            </template>
            <template #next-text>
                <van-icon name="arrow" />
            </template>
        </van-pagination>
    </div>
</template>

<script>
    import Vue from 'vue';
    import { Toast,Pagination,Icon } from "vant"
    import { Loading } from 'element-ui';

    Vue.use(Loading);
    Vue.use(Pagination);
    Vue.use(Icon);

    export default {
        data() {
            return {
                title_label:'总数据',
                userId: '',
                currentPage:1,
                totalNum:1,
                tableData: [],
                exportList:[],
            }
        },
        created() {
            this.userId=JSON.parse(localStorage.getItem('userInfo')).userId;
            this.getPersonMonthlyAttendanceList();
        },
        methods: {
            getPersonMonthlyAttendanceList(){
                let loadingInstance = Loading.service();
                this.$https.post('/mobiles/getPersonMonthlyAttendanceList',{
                    userId:this.userId,
                    currentPage:this.currentPage
                }).then(res => {
                    if (res.data.code=='500'){
                        Toast(res.data.message);
                    }else if(res.data.code=='200'){
                        this.totalNum=res.data.data.total;
                        this.tableData=res.data.data.records;
                        this.title_label=res.data.data.records[0].personMonthlyAttendanceTitle;
                    }
                    loadingInstance.close();
                }).catch(err => {
                    console.log(err)
                });
            },
            //下载Excel
            getPersonMonthlyAttendanceData() {
                let loadingInstance = Loading.service();
                this.$https.post('/mobiles/exportPersonMonthlyAttendanceList',{
                    userId:this.userId,
                }).then(res => {
                    if (res.data.code=='500'){
                        Toast(res.data.message);
                    }else{
                        this.exportList=res.data.data;
                        //执行导出方法
                        this.export2Excel();
                        Toast("导出成功");
                    }
                    loadingInstance.close();
                    //this.$router.go(-1);
                }).catch(err => {
                    console.log(err)
                });
            },

            //导出excel数据
            export2Excel() {
                const tHeader = ['员工编号', '姓名','上班地点', '部门',  '职位', '标准出勤', '实际试用期出勤', '实际转正期出勤', '事假', '病假', '调休', '年假','其他请假','平时加班','周末加班','节假日加班','入职日期','转正日期','备注','迟到次数（10元/次）','缺卡次数（20元/次）','快递扣款','其他扣款','餐补8点','餐补10点','出差补贴','其他补贴（内推等）'];
                const filterVal = ['jobNumId', 'name', 'workPlace', 'dept', 'position', 'standardAttendance', 'probationAttendance', 'regularAttendance', 'personalLeave', 'sickLeave', 'transferVacation', 'annualLeave','otherLeave','usually','weekend','holidays','entryDate','correctionDate','remark','latenessNumber','missingCardsNumber','expressDeduction','otherDeduction','eightMealSupplement','tenMealSupplement','travelAllowance','otherAllowance'];
                const list=this.exportList;
                const data = this.formatJson(filterVal, list);
                const {export_json_to_excel} = require('@/views/hrmanager/excel/export2Excel')
                export_json_to_excel(tHeader, data, '个人月度考勤表' );
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]))
            },
        },


    };
</script>

<style lang="scss" >
    .title{
        width: 85%;
        margin: 30px auto 0;
        line-height: 40px;
        font-size: 12px;
        color: #409eff;

    }
.el-table{
    margin: 0 auto;
    color: #333;
    font-size: 12px;


}
    /*border-color: */
    .el-table--border:after,.el-table--group:after,.el-table:before {

       background-color: #c1c1c1 !important;

    }

    .el-table--border,.el-table--group {

     border-color: #c1c1c1 !important;

    }

    .el-table td,.el-table th.is-leaf {

       border-bottom: 1px solid #c1c1c1 !important;

    }

    .el-table--border th,.el-table--border th.gutter:last-of-type {

        border-bottom: 1px solid #c1c1c1 !important;

    }

    .el-table--border td,.el-table--border th {

        border-right: 1px solid #c1c1c1 !important;

    }
    .el-table .el-table__header-wrapper .el-table__header .is-group th.is-leaf {
        border-bottom: 1px solid #c1c1c1 !important;
    }
    .el-table thead.is-group th {
        /*#f5f7fa*/
        /*background: #d1d1d1;*/
        color: #585b50;
    }

</style>
